---
import LiteYouTube from './LiteYouTube.astro'
import SectionTitle from './SectionTitle.astro'
interface Props {
  workout?: {
    videoID: string
    thumbnail: string
  }
}
const { workout = undefined } = Astro.props
const hasWorkout = workout !== undefined
---

{
  hasWorkout && (
    <section class="mx-auto  my-16 lg:my-36  max-w-6xl px-2 lg:px-10">
      <div class="text-dark-magenta text-center">
        <SectionTitle title="Entrenamiento" />
        <p class="mt-5 text-xl uppercase">Preparación para el combate</p>
      </div>
      <div class="mt-10 pt-12 px-4">
        <LiteYouTube videoId={workout.videoID} backgroundImage={workout.thumbnail} />
      </div>
    </section>
  )
}
